<template>
  <div>
    <div v-for="item in stadiumList" :key="item.id" class="stadium">
      <div>{{ item.name }}</div>
      <hr/>
      <!-- 星期 -->
      <div>
      <p>选中的:{{days[day]}}</p>
        <el-button v-for="(item,index) in days" :key="index" @click="day=index">{{ item }}</el-button>
      </div>
      <!-- 运动类型 -->
      <p>选中的运动类型:{{ sport.sport_type_codeName }}</p>
      <div class="sports"> 
    
        <div v-for="spo in item.sports" :key="spo.id" class="sport" @click="sport=spo">
          {{ spo.sport_type_codeName }}
        </div>
      </div>
      <!-- 场地 -->
      <div class="fields">
          <div v-for="item in fieldsList" :key="item.id">
            <span>{{ item.name||item.id }}</span>
            <span v-for="session in sessions" :key="session.starts" style="padding:15px">
            {{ session.starts }}
            </span>
          </div>
      </div>
      <!-- 开放时间 -->
      <p>开放时间:{{ JSON.stringify(openTime) }}</p>
      <p>分割时间:{{ splitTime }} <button @click="splitTime=15">15</button> <button @click="splitTime=60">一小时</button></p>
      
    </div>
  </div>

</template>
<script setup>
// 处理时间
import dayjs from 'dayjs';
// 响应类型
import {ref} from   'vue'
// 接口
import {GetStadium,GetFields} from '@/api/stadium.js'
// 定义星期
const days = ["周一","周二","周三","周四","周五","周六","周日","节假日","临时调整"];
// 场馆列表
const stadiumList = ref([])
// 场地
const fieldsList = ref([]);
// 星期
const day = ref(0);
// 选择的运动类型
const sport = ref(null);
// 开放事件
const openTime = ref([]); //运动类型对应的日期来获取
// 分割时间
const splitTime = ref(60);
//时间 分段
const sessions = ref([]);

// 获取场馆的方法 asc正序 小到大 desc 倒序

const getStadium = ()=>{
  GetStadium({order:"asc"})
  .then(res=>{
    stadiumList.value = res.data.data;
    getFields(res.data.data[0].sports[0].id)
    sport.value = res.data.data[0].sports[0];
    console.log(sport.value["day1"],"sport.value");
    openTime.value = sport.value['day'+(day.value+1)].split(",");
    var arr = genTimeSession(openTime.value[0].split("-")[0],openTime.value[0].split("-")[1], splitTime.value);
    console.log("arr",arr)
    sessions.value = arr;
  })
}
// 默认获取一次
getStadium();
// 获取场地
const getFields = (id)=>{
  GetFields({sport_id:id})
  .then(res=>{
    fieldsList.value = res.data.data;
  })
}

// 写一个方法创建时间分段
function genTimeSession(start="08:00",end="12:00",splitTime=60){
  // 返回的数据
  var arr = [];
  // 开始时间
  var startTime = dayjs("2023-06-20 "+start);
  // 结束时间
  var endTime = dayjs("2023-06-20 "+end);  
  // 遍历100次
  for(var i=0;i<100;i++){
    // 对象{starts:"08:00",ends:"09:00"}
    var obj={starts:startTime.format("HH:mm")};
    // 结束时间等于在原有基础上加60分钟    
    startTime= startTime.add(splitTime, 'minute');
    obj.ends = startTime.format("HH:mm");
    if(startTime.isSameOrBefore(endTime)){
      arr.push(obj);
    }else{
      break;
    }
    
    
  }
  return arr;
}

// 如果实现联动
// 01 运动类型发生变化:,更新场地,更新星期,更新开放时间,更新分割时间,更新sessions
// 02 星期变化时候:更新开放时间 ,更新分割时间,更新sessions
// 03 分割时间变化时候:更新sessons


</script>
<style scoped lang="scss">
  .stadium{
    margin-top: 50px;
  }
  .sports{ display: flex;}
  .sport{ flex:1}
</style>